<template>
  <div class="login-wrapper">
    <div class="login_left">
      <div class="logo-wrapper">
        <img src="@/assets/imgs/logo.png"/>
        <span class="text-20px font-bold">ElementAdmin</span>
      </div>
      <div class="login_left_content">
        <TransitionGroup appear tag="div" enter-active-class="animate__animated animate__bounceInLeft">
          <img key="1" src="@/assets/imgs/login-bg.svg"/>
          <div key="2">欢迎使用本系统</div>
        </TransitionGroup>
      </div>
    </div>
    <div class="login_right">
      <div class="switch-theme">
        <ElSwitch
          :model-value="isDrak"
          inline-prompt
          :active-icon="Sun"
          :inactive-icon="CrescentMoon"
          @change="onChangeSystemTheme"
        />
      </div>
      <div class="login_right_content">
        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
          <div class="login_content_form-wrapper">
            <LoginForm></LoginForm>
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts" name="">
  import './style/index.scss'
  import { h, ref, computed } from 'vue'
  import { Icon } from '@/components'
  import { ElDrawer, ElDivider , ElRadioGroup, ElRadio, ElSwitch , ElButton } from "element-plus"
  import LoginForm from './components/LoginForm.vue'
  import { useAppStore } from '@/store/modules/app'
  
  const isLogin = ref(true)
  const toRegister = () => {
    isLogin.value = false
  }

  const toLogin = () => {
    isLogin.value = true
  }

  const appStore = useAppStore()

  // 系统主题
  const Sun = h(Icon, { icon: 'vi-emojione-monotone:sun', color: '#fde047'})
  const CrescentMoon = h(Icon, { icon: 'vi-emojione-monotone:crescent-moon', color: '#fde047'})
  // 是否黑暗主题
  const isDrak = computed(() => appStore.getSystemTheme === 'system-theme-dark')
  const onChangeSystemTheme = (drakFlag) => {
    appStore.setSystemTheme(drakFlag ? 'system-theme-dark' : 'system-theme-default')
  }

// 设置switch的背景颜色
const blackColor = 'var(--el-color-black)'
</script>